<template>
	<div class="loading">
		<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			<g id="circle" class="g-circles g-circles--v1">
				<circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35" cy="16.6987298"
				 r="10"></circle>
				<circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) " cx="16.6987298" cy="35"
				 r="10"></circle>
				<circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60" r="10"></circle>
				<circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) " cx="16.6987298" cy="85"
				 r="10"></circle>
				<circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) " cx="35" cy="103.30127"
				 r="10"></circle>
				<circle id="7" cx="60" cy="110" r="10"></circle>
				<circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) " cx="85" cy="103.30127"
				 r="10"></circle>
				<circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) " cx="103.30127" cy="85"
				 r="10"></circle>
				<circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60" r="10"></circle>
				<circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) " cx="103.30127" cy="35"
				 r="10"></circle>
				<circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85" cy="16.6987298"
				 r="10"></circle>
				<circle id="1" cx="60" cy="10" r="10"></circle>
			</g>
			<use xlink:href="#circle" class="use"></use>
		</svg>
		<span class="progress">{{index}}%</span>
	</div>
</template>

<script>
	export default {
		name: 'micLoading',
		props: {
			index: {
				type: Number
			}
		}
	}
</script>

<style scoped>
	.loading{position:absolute;left:50%;top:50%;z-index:10;margin:-62.5px 0 0 -60px;}
	.loading .progress{position:absolute;font-size:14px;display:block;color:#fff;left:50%;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%)}
	svg{height:120px;width:120px;overflow:visible}
	.g-circles{-webkit-transform:scale(.9) translate(7px,7px);-ms-transform:scale(.9) translate(7px,7px);transform:scale(.9) translate(7px,7px)}
	circle{fill:#1e90ff;fill-opacity:0;-webkit-animation:opacity 1.2s linear infinite;animation:opacity 1.2s linear infinite}
	circle:nth-child(12n+1){-webkit-animation-delay:-.1s;animation-delay:-.1s}
	circle:nth-child(12n+2){-webkit-animation-delay:-.2s;animation-delay:-.2s}
	circle:nth-child(12n+3){-webkit-animation-delay:-.3s;animation-delay:-.3s}
	circle:nth-child(12n+4){-webkit-animation-delay:-.4s;animation-delay:-.4s}
	circle:nth-child(12n+5){-webkit-animation-delay:-.5s;animation-delay:-.5s}
	circle:nth-child(12n+6){-webkit-animation-delay:-.6s;animation-delay:-.6s}
	circle:nth-child(12n+7){-webkit-animation-delay:-.7s;animation-delay:-.7s}
	circle:nth-child(12n+8){-webkit-animation-delay:-.8s;animation-delay:-.8s}
	circle:nth-child(12n+9){-webkit-animation-delay:-.9s;animation-delay:-.9s}
	circle:nth-child(12n+10){-webkit-animation-delay:-1s;animation-delay:-1s}
	circle:nth-child(12n+11){-webkit-animation-delay:-1.1s;animation-delay:-1.1s}
	circle:nth-child(12n+12){-webkit-animation-delay:-1.2s;animation-delay:-1.2s}
	@-webkit-keyframes opacity{3%{fill-opacity:1}
	75%{fill-opacity:0}
	}
	@keyframes opacity{3%{fill-opacity:1}
	75%{fill-opacity:0}
	}
</style>
